<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>员工列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div id="content">
    <div>
        <button type="button" class="layui-btn layui-btn-normal">员工列表</button>
    </div>

    <div class="layui-form  serchDiv">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请选择部门</label>
                <div class="layui-input-inline">
                    <select name="did" lay-verify="required" id="test1"lay-search="">
                        <option value="">直接选择</option>
                        <option value="1">信息安全部</option>
                        <option value="5">项目开发部</option>
                        <option value="6">市场营销部</option>
                        <option value="7">软件技术部</option>
                        <option value="8">系统详细设计</option>
                        <option value="9">系统详细</option>

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" placeholder="请输入">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test3" placeholder="请输入">
                </div>
            </div>
            <br>
            <div class="layui-inline">
                <label class="layui-form-label">请选择职位</label>
                <div class="layui-input-inline">
                    <select name="jid" lay-verify="required" id="test4"lay-search="">
                        <option value="">直接选择</option>
                        <option value="1">高级程序员</option>
                        <option value="4">产品经理</option>
                        <option value="6">测试经理</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test5" placeholder="请输入">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test6" placeholder="请输入">
                </div>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>


    <div>
        <table class="layui-hide" id="test" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>

<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/oasys/employee/findall.do'
            , page: true
            , toolbar: 'default'
            , totalRow: true
            , cols: [[
                {field: 'id', title: 'ID', width: '80', sort: true}
                , {field: 'ename', title: '员工姓名', width: '120'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'sex', title: '性别', width: '80', sort: true}
                , {field: 'phone', width: '120', title: '手机号'}
                , {field: 'email', width: '210', title: '邮箱'}
                , {field: 'position', width: '120', title: '职位', align: 'center'} //单元格内容水平居中
                , {field: 'education', width: '80', title: '学历', sort: true, align: 'right'} //单元格内容水平居中
                , {field: 'numberid', width: '200', title: '身份证号', sort: true, align: 'right'}
                , {field: 'department', width: '120', title: '部门', sort: true, align: 'right'}
                , {field: 'address', width: '180', title: '地址', sort: true, align: 'right'}
                , {field: 'creattime', width: '180', title: '创建时间', sort: true, align: 'right'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
            , id: 'transferTable'
        });

        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;

            if (obj.event === 'detail') {

                layer.alert('员工信息：<br>' + JSON.stringify(data))
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    console.log(data.id)
                    $.ajax({
                        url: '/oasys/employee/delete.do?id=' + data.id,
                        type: 'delete',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == 1) {
                                console.log(data);
                                layer.alert(data.info);
                                location.reload(); //删除成功后再刷新
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                layer.confirm('真的要编辑吗', function (index) {

                    window.location.href = 'updateemployee.html?id=' + data.id;

                });
            }
        });

        var  active = {
            reload: function(){
                //执行重载
                table.reload('transferTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                            did: $('#test1').val(),
                            name: $('#test2').val(),
                            cardId: $('#test3').val(),
                            jid: $('#test4').val(),
                            gender: $('#test5').val(),
                            phone: $('#test6').val()
                    }
                }, 'data');
            }
        };

        $('.serchDiv .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });


</script>

</body>
</html>